// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:map";
@import "@blueprintjs/core/src/common/react-transition";
@import "@blueprintjs/core/src/common/variables-extended";
@import "@blueprintjs/core/src/components/icon/icon-mixins";
@import "@blueprintjs/icons/lib/scss/variables";

// Generate a selector for a page ID by reference
@function page($ref, $comparator: "$=") {
  @return '[data-page-id#{$comparator}"#{$ref}"]';
}

// Generate a selector for a React component example by name
@function example($ComponentName, $comparator: "=") {
  @return '[data-example-id#{$comparator}"#{$ComponentName}Example"]';
}

// Common modifiers, incubating usage before they can be incorporated into @blueprintjs/docs-theme

.docs-flex-column {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.docs-prop-code-tooltip {
  margin-bottom: $pt-spacing * 2;
}

.docs-example .#{$ns}-form-group:last-child {
  margin-bottom: 0;
}

// Example-specific customizations

//
// CORE
//

@keyframes docs-wiggle-rotate {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-3deg);
  }

  75% {
    transform: rotate(3deg);
  }

  100% {
    transform: rotate(0);
  }
}

#{page("tree")} .#{$ns}-tree {
  width: $pt-spacing * 87.5;
}

#{example("BreadcrumbsOverflow")} {
  .#{$ns}-breadcrumbs {
    max-width: 300px;
  }
}

#{example("ButtonPlayground")} {
  .docs-example {
    flex-direction: column;
    gap: $pt-spacing * 7.5;

    > * {
      margin: 0;
    }

    p {
      text-align: center;
    }
  }

  .docs-wiggle {
    animation: docs-wiggle-rotate $pt-transition-duration $pt-transition-ease infinite;
  }

  .#{$ns}-button:not(.#{$ns}-fill) {
    max-width: 200px;
  }
}

.docs-code-example {
  .group {
    display: flex;
    gap: $pt-spacing * 2;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: $pt-spacing * 2;
  }

  .center {
    align-items: center;
  }
}

#{example("CardElevation")} {
  .docs-code-example {
    // lighten the example background in dark mode to make elevation shadows visible
    .#{$ns}-dark & {
      background-color: $dark-gray3;
    }
  }

  .#{$ns}-card {
    align-items: center;
    display: flex;
    height: $pt-spacing * 15;
    justify-content: center;
    width: $pt-spacing * 15;
  }
}

#{example("CardListSection")} {
  .#{$ns}-section-card {
    .#{$ns}-dark & {
      // need a bit of margin to account for inset box shadow
      margin-bottom: 1px;
    }
  }
}

#{example("CardListPlayground")} {
  .docs-example > div {
    flex-grow: 1;
  }

  .#{$ns}-card {
    justify-content: space-between;
  }

  .docs-section-card-limited-height {
    max-height: 152px;
    overflow-y: auto;

    .#{$ns}-dark & {
      // need a bit of margin to account for inset box shadow
      margin-bottom: 1px;
    }
  }

  .#{$ns}-section.#{$ns}-compact {
    .docs-section-card-limited-height {
      max-height: 122px;
    }
  }
}

// SwitchCard, CheckboxCard, RadioCard
.docs-control-card-group {
  width: 100%;
}

.docs-control-card-group-row {
  display: grid;
  gap: $pt-spacing * 5;
  grid-template-columns: repeat(auto-fit, minmax($pt-spacing * 25, 1fr));
  width: 100%;
}

#{example("ControlCardList")} {
  .#{$ns}-control-card-label .#{$ns}-icon {
    margin-right: $pt-spacing * 2;
  }
}

#{example("EditableTextBasic")},
#{example("EditableTextMultiline")},
#{example("EditableTextIntent")},
#{example("EditableTextSelect")} {
  .#{$ns}-editable-text {
    width: 200px;
  }
}

#{example("EditableTextPlayground")} {
  .docs-example {
    display: block;
  }

  h1 {
    margin-bottom: $pt-spacing * 7.5;
  }
}

#{example("FormGroup")} {
  .docs-example .#{$ns}-card {
    display: flex;
    flex-direction: column;
    gap: $pt-spacing * 2;
  }

  // this example has a "fill" prop option, which doesn't work nicely with the default margin
  .docs-example > * {
    margin-left: 0;
    margin-right: 0;
  }

  .#{$ns}-form-content {
    min-width: $pt-spacing * 50;
  }
}

#{example("Slider")} {
  .docs-example .#{$ns}-card {
    display: flex;
    justify-content: space-around;
    padding-inline: $pt-spacing * 10;
    width: 100%;
  }
}

#{example("Menu")} .#{$ns}-menu {
  max-width: 280px;
}

#{example("Dialog")} .docs-example-options {
  max-width: 260px;
}

.docs-multistep-dialog-example-step {
  min-height: 150px;
}

#{example("DividerBasic")} .docs-code-example > :first-child {
  max-width: 300px;
  text-align: center;
  width: 100%;
}

#{example("DividerVertical")} .docs-code-example > :first-child {
  gap: $pt-spacing * 2;
  max-width: 500px;
  text-align: center;
  width: 100%;
}

#{example("Tag")},
#{example("CompoundTag")} {
  .docs-example {
    flex-direction: column;

    > * {
      margin: $pt-spacing * 2;
    }
  }
}

.docs-context-menu-example {
  .docs-example {
    flex-direction: column;
    height: $pt-spacing * 62.5;
  }

  .docs-context-menu-node {
    $node-size: $pt-spacing * 20;
    $icon-size: $pt-icon-size-standard * 2;
    $node-border-width: $pt-spacing;
    background-color: $blue5;

    border: $node-border-width solid $white;
    border-radius: 50%;
    box-shadow: $pt-elevation-shadow-2;
    height: $node-size;
    overflow: hidden;
    width: $node-size;

    &::before {
      @include pt-icon($icon-size, 16);
      color: $white;
      content: map.get($blueprint-icon-codepoints, "envelope");
      left: ($node-size - $icon-size) * 0.5 - $node-border-width;
      position: relative;
      top: ($node-size - $icon-size) * 0.5 - $node-border-width;
    }

    &.docs-context-menu-open {
      box-shadow:
        $pt-elevation-shadow-2,
        0 0 0 4px $orange4;
    }

    .#{$ns}-dark & {
      background-color: $blue2;
    }
  }
}

$docs-hotkey-piano-height: 510px;

.docs-hotkey-piano-example {
  min-height: $docs-hotkey-piano-height;
  opacity: 0.5;
  transition: opacity ($pt-transition-duration * 2) $pt-transition-ease;

  &:hover {
    cursor: pointer;
    opacity: 0.75;
  }

  &:focus {
    cursor: default;
    opacity: 1;
  }

  .#{$ns}-non-ideal-state {
    margin: 0;
    min-height: $docs-hotkey-piano-height - ($pt-spacing * 5);
    padding: $pt-spacing * 5;
  }

  > :first-child {
    margin-bottom: $pt-spacing * 5;
  }

  .piano-key {
    display: inline-block;
    position: relative;
    z-index: 1;

    > div {
      background-color: $white;
      border-bottom-left-radius: $pt-spacing;
      border-bottom-right-radius: $pt-spacing;
      color: $black;
      height: $pt-spacing * 60;
      margin-right: $pt-spacing;
      width: $pt-spacing * 20;
    }
  }

  .piano-key-sharp {
    overflow: visible;
    vertical-align: top;
    width: 0;
    z-index: 2;

    > div {
      background-color: $black;
      color: $white;
      height: $pt-spacing * 40;
      left: $pt-spacing * -10;
      position: absolute;
      top: 0;
    }
  }

  .piano-key-pressed > div {
    background-color: $pt-intent-primary;
    color: $white;
  }

  .piano-key-text {
    bottom: $pt-spacing;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
  }

  .piano-key-note {
    opacity: 0.5;
  }
}

#{example("HotkeyTester")} {
  .docs-hotkey-tester {
    @include pt-flex-container(column, $pt-spacing * 2);
    align-items: center;
    background: rgba($gray3, 0.2);
    border: 2px solid rgba($gray3, 0.8);
    border-radius: $pt-border-radius * 2;
    flex: 1 1;
    justify-content: space-around;
    max-width: 70%;
    min-height: $pt-spacing * 30;
    opacity: 0.4;
    padding: $pt-spacing * 5;
    transition: all $pt-transition-duration $pt-transition-ease;

    &:hover {
      cursor: pointer;
      opacity: 0.6;
    }

    &:focus {
      background: rgba($blue3, 0.1);
      border: 2px solid rgba($blue3, 0.6);
      color: map.get($pt-intent-text-colors, "primary");
      cursor: default;
      opacity: 1;

      .#{$ns}-dark & {
        background: rgba($blue4, 0.1);
        border: 2px solid rgba($blue4, 0.6);
        color: map.get($pt-dark-intent-text-colors, "primary");
      }
    }
  }
}

#{example("NumericInputExtended")} {
  .#{$ns}-input-group {
    min-width: 250px;
  }
}

#{example("OverflowList")} {
  .#{$ns}-card {
    margin: 0;
    min-width: $pt-spacing * 17.5;
  }

  .#{$ns}-overflow-list {
    white-space: nowrap;
  }
}

#{example("Overlay")},
#{example("Overlay2")} {
  .docs-example {
    position: relative;
  }
}

// prettier-ignore
.docs-overlay-example-transition {
  $overlay-example-width: $pt-spacing * 100;
  $enter: (
    transform: (translateY(-50vh) rotate(-10deg), translateY(0) rotate(0deg))
  );
  $leave: (
    transform: (translateY(150vh) rotate(-20deg), translateY(0) rotate(0deg))
  );

  @include react-transition-phase(
    "#{$ns}-overlay",
    "enter",
    $enter,
    $pt-transition-duration * 3,
    $pt-transition-ease-bounce,
    $before: "&"
  );
  @include react-transition-phase(
    "#{$ns}-overlay",
    "exit",
    $leave,
    $pt-transition-duration * 5,
    $before: "&"
  );
  left: calc(50vw - #{$overlay-example-width * 0.5});
  margin: 10vh 0;

  top: 0;
  width: $overlay-example-width;

  .#{$ns}-overlay-inline & {
    left: calc(50% - #{$overlay-example-width * 0.5});
    margin: ($pt-spacing * 5) 0;
  }
}

.docs-overlay-example-tall {
  height: 200%;
}

#{example("Popover")} {
  .docs-example {
    display: block;
    max-height: 785px;
    overflow: scroll;
    padding: 0;
    position: relative; // create a stacking context for when usePortal={false}
  }

  .docs-popover-example-scroll {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 1700px;
    justify-content: center;
    margin: 0;
    width: 1600px;

    > p {
      margin-top: $pt-spacing * 2;
    }
  }
}

#{example("PopoverDismiss")} {
  height: 220px;

  .docs-reopen-message {
    text-align: center;
    width: 240px;
  }

  .#{$ns}-popover-content {
    min-width: 300px;
    padding: $pt-spacing * 5;

    .#{$ns}-button:not(:first-child) {
      margin-left: $pt-spacing * 2;
    }

    .#{$ns}-callout {
      margin: ($pt-spacing * 2) 0;
    }
  }
}

#{example("PanelStack")} {
  .docs-panel-stack-example {
    box-shadow: $pt-elevation-shadow-0;
    height: 240px;
    width: 300px;

    .#{$ns}-dark & {
      box-shadow: border-shadow(0.2, $white);
    }
  }

  .docs-panel-stack-contents-example {
    align-items: center;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: space-around;
    padding: $pt-spacing * 2;
  }

  ul {
    max-height: 240px;
    overflow: auto;
  }
}

.docs-popover-placement-example {
  .docs-example-grid {
    display: grid;
    gap: $pt-spacing * 2;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 2fr 1fr;
    justify-content: stretch;
    margin: 0;
  }

  @each $row-line in (1, 2, 3) {
    @each $col-line in (1, 2, 3) {
      .docs-example-grid-#{$row-line}-#{$col-line} {
        grid-column: #{$col-line}/#{$col-line + 1};
        grid-row: #{$row-line}/#{$row-line + 1};
      }
    }
  }

  @each $line in (1, 2, 3) {
    // top row and first col
    .docs-example-grid-1-#{$line},
    .docs-example-grid-#{$line}-1 {
      align-self: end;
    }

    // middle row and middle col
    .docs-example-grid-2-#{$line},
    .docs-example-grid-#{$line}-2 {
      align-self: stretch;
    }

    // last row and last col
    .docs-example-grid-3-#{$line},
    .docs-example-grid-#{$line}-3 {
      align-self: start;
    }
  }

  // middle area
  .docs-example-grid-2-2 {
    align-self: center;
    text-align: center;
  }

  em {
    display: inline-block;
    max-width: $pt-spacing * 62.5;

    .#{$ns}-dark & {
      color: $pt-dark-text-color-muted;
    }
  }
}

.docs-popover-placement-example-content {
  .#{$ns}-popover-content {
    line-height: 2;
    padding: ($pt-spacing * 2) ($pt-spacing * 5);
    text-align: center;
  }

  code {
    font-weight: 600;
  }
}

.docs-popover-placement-value-code-block {
  font-size: $pt-font-size-large;
  font-weight: 600;
  text-align: center;
}

.docs-popover-placement-label-side {
  color: $cerulean3;

  .#{$ns}-dark & {
    color: $cerulean5;
  }
}

.docs-popover-placement-label-alignment {
  color: $forest3;

  .#{$ns}-dark & {
    color: $forest5;
  }
}

.docs-popover-minimal-example {
  .#{$ns}-button:first-child {
    margin-right: $pt-spacing * 2;
  }
}

.docs-popover-interaction-kind-example {
  .#{$ns}-button {
    font-family: $pt-font-family-monospace;
    margin-right: $pt-spacing * 2;
  }
}

.docs-popover-sizing-example {
  max-height: $pt-spacing * 37.5;
  overflow-y: auto;
}

.docs-popover-portal-example {
  .docs-popover-portal-example-scroll-container {
    background: $light-gray3;
    border-radius: $pt-border-radius;
    flex: 1 1 auto;
    overflow: scroll hidden;
    position: relative;

    .#{$ns}-dark & {
      background: $dark-gray5;
    }
  }

  .docs-popover-portal-example-scroll-content {
    // can't compute this height easily using SCSS variables. instead of using
    // JS to measure, just hardcode it since we have full control of all the
    // example code.
    $assumed-height-of-target-plus-popover: $pt-spacing * 21.25;
    $vertical-padding: $pt-spacing * 5;
    align-items: flex-start;

    display: flex;
    height: $assumed-height-of-target-plus-popover + (2 * $vertical-padding);
    justify-content: center;
    padding-top: $vertical-padding;
    // wide enough to allow scrolling, but wide enough to let the popover target
    // fully leave the viewport.
    width: 200%;
  }
}

.docs-popover-portal-example-popover {
  .#{$ns}-popover-content {
    padding: $pt-spacing * 2;
    white-space: nowrap;
  }
}

.#{$ns}-progress-bar.docs-toast-progress {
  margin-bottom: 0;
  margin-top: $pt-spacing;
}

#{example("Tooltip")} {
  .docs-example {
    flex-direction: column;

    > * {
      margin: $pt-spacing;
    }
  }
}

#{example("ButtonGroup")},
#{example("ButtonGroupPopover")},
#{example("Drawer")} {
  .docs-example > * {
    margin: 0;
  }
}

#{example("Toast")} {
  .docs-example {
    // necessary for inline Toaster (usePortal={false})
    position: relative;
  }
}

#{example("Tabs")} {
  .docs-example .#{$ns}-card {
    display: flex;
    flex-direction: column;
    gap: $pt-spacing * 2;
  }
}

#{example("Section")} {
  .docs-example {
    align-items: start;
  }

  .metadata-panel {
    display: flex;
    flex-direction: column;
    gap: $pt-spacing * 2;

    > div {
      display: flex;
      justify-content: space-between;
    }
  }
}

//
// DATETIME
//

// all datetime examples show component followed by date tags, so arrange them in a nice column
#{page("datetime", "^=")} {
  .docs-example {
    flex-direction: column;
    gap: $pt-spacing * 2;
    justify-content: center;
  }
}

.docs-date-range {
  @include pt-flex-container(row, $pt-spacing);
  align-items: center;
}

#{example("DateInput")} {
  .#{$ns}-date-input {
    // should not grow in vertical direction when fill={true}
    flex-grow: 0;
    min-width: 300px;
  }
}

// these component examples have a "fill" prop option, which doesn't work nicely with the default margin
#{example("DateInput")},
#{example("DateRangeInput")} {
  .docs-example > * {
    margin: 0;
  }
}

#{example("TimezoneSelect")} .docs-example {
  flex-direction: row;
}

.icon-select {
  width: 170px;
}

//
// DATETIME2
//

#{example("DatePickerModifier")} {
  .docs-date-picker-day-odd {
    color: $red2;

    .#{$ns}-dark & {
      color: $red4;
    }
  }
}

#{example("DateRangeInput")} {
  .docs-example {
    padding: ($pt-spacing * 10) ($pt-spacing * 5);
  }

  .#{$ns}-input-group {
    min-width: 200px;
  }
}

#{example("MultiSelect")} .docs-example {
  .docs-custom-target {
    padding-right: 6px;
    width: 100%;
  }

  .docs-custom-target-content {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-width: 145px;
  }

  .docs-custom-target-text {
    margin-right: 8px;
  }
}

//
// TABLE
//

#{page("table", "^=")} {
  // make all tables the same width & height
  .#{$ns}-table-container {
    height: $pt-spacing * 90;
    width: 100%;
  }

  // reduce example container padding
  .docs-example {
    padding: 0;
  }
}
